<template>
  <div id="homeTitleBar">
    <table id="homeHeadTable" cellspacing="0" cellpadding="0">
      <tr id="homeTitleTableTr1" height="50%">
        <td>
          <img id="titleChar0" src="../../../../assets/img/home/titleChar0.png" alt="">
        </td>
        <td width="50%">
          <span>
              <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tx&skin=pitaya&fontsize=14&color=fff" frameborder="0" allowtransparency="true"></iframe>
          </span>
        </td>
        <td width="8%">
          <el-button icon="el-icon-user" id="loginBtn" @click="ToLogin" v-if="this.$store.getters.isLogin === false">登录</el-button>
          <el-button v-else @click="ToProfile">{{this.$store.getters.getUserName}}</el-button>
        </td>
        <td width="8%">
          <el-button icon="el-icon-user-solid" id="registerBtn" @click="ToRegister" v-if="this.$store.getters.isLogin === false">注册</el-button>
          <el-button @click="logOut" v-else>退出系统</el-button>
        </td>

      </tr>
      <tr id="homeTitleTableTr2" height="50%">
        <el-menu
            mode="horizontal"
            router
            background-color="rgba(0,0,0,0)"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-menu-item index="/home">首页</el-menu-item>
          <el-menu-item @click="JumpToChart">数据可视化</el-menu-item>
          <el-menu-item index="/profile">个人管理</el-menu-item>
        </el-menu>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    name: "HomeTitleBar",
    methods: {
      ToLogin() {
        this.$router.replace('/login');
      },
      ToRegister() {
        this.$router.replace('/register');
      },
      logOut() {
        this.$store.commit('setIsLogin', false);
        window.localStorage.setItem('loginJudge', 'false');
        this.$router.replace('/home');
      },
      ToProfile() {
        this.$router.replace('/profile');
      },
      JumpToChart() {
        document.getElementById("homeChartTitle").scrollIntoView({
          behavior: "smooth"
        });
      },
    },
  }
</script>

<style scoped>
  #homeTitleBar {
    position: absolute;
    top: 0;
    width: 100%;
    height: 15%;
    background-color: rgba(0,0,0,0);
    z-index: 1010;
  }
  #homeHeadTable {
    position: absolute;
    top: 0;
    right: 20%;
    width: 60%;
    height: 100%;
    border: 0;
  }
  #homeHeadTable #homeTitleTableTr1 .el-button {
    position: relative;
    top: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 15px;
    background-color: rgba(0,0,0,0);
    border: 0;
  }
  #homeHeadTable td span iframe {
    position: absolute;
    top: 15%;
    width: 50%;
    height: 35%;
    /*border: solid 1px;*/
  }
  #homeTitleTableTr2 {
    position: absolute;
    border: 0;
    width: 100%;
    height: 50%;
    border-top: 1px solid;
    color: #fff;
  }
  .el-menu {
    position: absolute;
    top: 0;
    height: 100%;
    left: 20%;
    width: 60%;
    border: 0 solid;
  }
  .el-menu .el-menu-item{
    position: relative;
    height: 100%;
    width: 33%;
    text-align: center;
    line-height: 320%;
    font-size: 15px;
  }
  #titleChar0 {
    position: absolute;
    width: 25%;
    /*border: solid 1px;*/
    top: 0;
  }
</style>